<template>
	<view class="zy-column-full">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="zy-status-bar"></view>
				<view class="zy-row-between zy-mr" style="position: relative;">
					<zy-arrow-left></zy-arrow-left>
					<zy-icon :url="getImageUrl('camera_white.png')" @click="toRelease"></zy-icon>
					<view class="zy-row-center zy-text-white-lg-bold"
						style="position: absolute; z-index: -1;  width: 100%; ">我的游历墙</view>
				</view>
			</template>

			<!-- <view class="zy-column zy-mh-lg" style="margin-top: 20rpx; margin-bottom: 20rpx;"
				v-for="(item, index) in dataList" :key="index">
				<view class="zy-row">
					<image class="zy-img-circle" mode="aspectFill" :src="item.headPicUrl"></image>
					<view class="zy-column-center zy-ml">
						<view class="zy-row">
							<view class="zy-text-white-lg-bold">{{item.nick}}</view>
							<image class="zy-icon zy-ml-sm" mode="widthFix" :src="getImageUrl('ic_crown.png')"></image>
							<view class="zy-btn-grey-sm zy-ml-sm">65</view>
						</view>
						<view class="zy-text-whitegrey-sm zy-mt-sm">00后 济南市 天蝎座</view>
					</view>
				</view>
				<!-- 内容 -->
				<!-- <view class="zy-text-white-lg zy-mt">{{item.content}}</view> -->
				<!-- 图片 -->
				<!-- <view class="bottom zy-mt" v-if="item.fileUrl">
					<view v-if="item.fileUrl.length==1">
						<image class="image-one" :src="item.fileUrl[0]" @click="onPreviewImage(item.fileUrl, 0)">
						</image>
					</view>
					<view v-if="item.fileUrl.length==2">
						<image class="image-two-left" :src="item.fileUrl[0]" @click="onPreviewImage(item.fileUrl, 0)">
						</image>
						<image class="image-two-right" :src="item.fileUrl[1]" @click="onPreviewImage(item.fileUrl, 1)">
						</image>
					</view>
					<view v-if="item.fileUrl.length==3"
						style="display: flex; flex-direction: row; align-items: center;">
						<view class="image-three-left">
							<image class="image-three-top" :src="item.fileUrl[1]"
								@click="onPreviewImage(item.fileUrl, 1)"></image>
							<image class="image-three-bottom" :src="item.fileUrl[2]"
								@click="onPreviewImage(item.fileUrl, 2)"></image>
						</view>
						<image class="image-three-right" :src="item.fileUrl[0]" @click="onPreviewImage(item.fileUrl, 0)">
						</image>
					</view>
					<view v-if="item.fileUrl.length>=4"
						style="display: flex; flex-direction: column; align-items: center;">
						<view class="image-four">
							<image class="image-four-small top-left-radius" :src="item.fileUrl[0]"
								@click="onPreviewImage(item.fileUrl, 0)"></image>
							<image class="image-four-big top-right-radius" :src="item.fileUrl[1]" mode="aspectFill"
								@click="onPreviewImage(item.fileUrl, 1)"></image>
						</view>
						<view class="image-four">
							<image class="image-four-big bottom-left-radius" :src="item.fileUrl[2]" mode="aspectFill"
								@click="onPreviewImage(item.fileUrl, 2)"></image>
							<image class="image-four-small bottom-right-radius" :src="item.fileUrl[3]"
								@click="onPreviewImage(item.fileUrl, 3)"></image>
							<view class="image-other" v-if="item.fileUrl.length>4">+{{item.fileUrl.length - 4}}张 </view>
						</view>
					</view>
				</view>
				<view class="zy-text-yellow-light-sm zy-mt-lg">上海市</view>
				<view class="zy-row-between zy-mt-sm">
					<view class="zy-text-whitegrey">1小时前</view>
					<view class="zy-row">
						<zy-icon :url="getImageUrl('dynamic_love.png')"></zy-icon>
						<zy-icon :url="getImageUrl('dynamic_message.png')"></zy-icon>
					</view>
				</view>
				<zy-line></zy-line>
			</view> -->
		
			<view v-for="(item, index) in dataList" :key="index">
				<dynamic-item :item="item"></dynamic-item>
			</view>
			
		
		</z-paging>

		<view class="zy-column-center-center zy-flex" v-if="dataList.length==0 && 1!=type" style="z-index: 99;">
			<image class="zy-icon-lg" mode="widthFix" :src="getImageUrl('ic_earth_white.png')"></image>
			<view class="zy-text-white-lg-bold zy-mt-lg">暂无游历</view>
			<view class="zy-text-white zy-mt">发布你的第一条动态</view>
			<view class="zy-text-white zy-mt">和大家分享你的生活吧~</view>
			<zy-button text="去发布" style="width:80%; margin-top: 200rpx;" @click.native="toRelease"></zy-button>
		</view>
	</view>
</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil';
	export default {
		data() {
			return {
				type:'',//1.所有；2.个人
				userId: '',
				dataList: [],
			};
		},
		onLoad(option) {
			if (option) {
				this.type = option.type;
				this.userId = option.userId;
				this.queryList(1, 20)
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				const params = {
					pageNo: pageNo,
					userId: this.userId,
					type: '1'
				}
				let url = '/api/dynamic/getOwnOrOthersDynamicList';
				if(1 == this.type){
					url = '/api/dynamic/getDynamicList';
				}
				uni.$http.get(url, params).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			onPreviewImage(list, index) {
				uni.previewImage({
					urls: list,
					current: index,
					fail: (error) => {
						console.log("error: " + JSON.stringify(error));
					}
				})
			},
			toRelease() {
				RouteUtil.toDynamicRelease()
			},
			onDelete(item, index) {
				uni.showModal({
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.requestDelete(item, index);
						}
					}
				})
			},
			requestDelete(item, index) {
				uni.$http.get('/api/dynamic/delOwnDynamic', {
					dynamicId: item.id
				}).then(res => {
					this.$common.showToast('删除成功')
					this.dataList.splice(index, 1)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 690rpx;
		margin-top: 15rpx;

		.image-one {
			width: 460rpx;
			height: auto;
			aspect-ratio: 3 / 4;
		}

		.image-two-left {
			width: 345rpx;
			aspect-ratio: 1;
			height: auto;
		}

		.image-two-right {
			width: 345rpx;
			height: auto;
			aspect-ratio: 1;
		}

		.image-three-right {
			width: 460rpx;
			height: 690rpx;
		}

		.image-three-left {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.image-three-top{
				width: 230rpx;
				height: 345rpx;
			}

			.image-three-bottom {
				width: 230rpx;
				height: 345rpx;
			}
		}

		.image-four {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;

			.image-four-small {
				width: 230rpx;
				height: 345rpx;
			}

			.image-four-big {
				width: 460rpx;
				height: 345rpx;
			}

			.image-other {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				background-color: #222;
				border-radius: 5rpx;
				padding: 8rpx 12rpx;
				font-size: 18rpx;
				color: #fff;
			}
		}

	}
</style>